<script setup>
import { reactive, ref } from 'vue'
import { onPullDownRefresh, onShow, onLoad, onReachBottom } from '@dcloudio/uni-app'
import listItem from './list-item.vue'
import empty from '@/components/empty/empty'
import { findCurAlarmPageList, findCalarmHisPageList, findFaultInfoPageList } from '@/api/system'

//分段显示器
const segmentedItem = reactive(['当前告警', '历史告警', '故障列表'])
const activeColor = ref('#007aff')
const current = ref(0) // 0 1 2
const fetchPath = {
  0: findCurAlarmPageList,
  1: findCalarmHisPageList,
  2: findFaultInfoPageList
}

//刷新分页页码
const pageNum = ref(1)
const pageSize = ref(20)
const total = ref(0)
const triggered = ref(false)
const _freshing = ref(false)

//工单数据列表
const wordOrderData = reactive([])

onShow(async () => refreshLiData())

/**
 * @function 分段选择器未安装/已安装
 * @param {*} e
 * @return {*}
 */
const tabsClickItem = (e) => {
  if (current.value != e.currentIndex) {
    try {
      current.value = e.currentIndex
      uni.showLoading({ title: '加载中', mask: true })
      pageNum.value = 1
      refreshLiData()
    } catch (error) {
      uni.hideLoading()
    }
  }
}

const refreshLiData = async () => {
  wordOrderData.length = 0
  uni.showLoading({ title: '加载中', mask: true })
  const data = await getList()
  uni.hideLoading()
  wordOrderData.push(...data)
  return data
}

const getList = async () => {
  uni.hideLoading()
  const result = await fetchPath[current.value]({
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    condition: {}
  })
  const resultData = result.data?.records || []
  total.value = result.data.total
  return resultData
}

/**
 * @function 下拉刷新
 * @return {*}
 */
const onRefresh = () => {
  triggered.value = true
}
const onPulling = async () => {
  if (_freshing.value) return
  _freshing.value = true

  try {
    const result = await getList()
    triggered.value = false
    _freshing.value = false
    if (result) {
      wordOrderData.length = 0
      wordOrderData.push(...result)
    }
  } catch (error) {
    triggered.value = false
    _freshing.value = false
  }
}
const onRestore = () => {
  triggered.value = 'restore'
}

/**
 * @function 上拉加载
 * @return {*}
 */
const loadMoreData = async () => {
  if (wordOrderData.length >= total.value) {
    return
  }
  pageNum.value = pageNum.value + 1
  uni.showLoading({ title: '加载中', mask: true })
  const data = await getList()
  uni.hideLoading()
  wordOrderData.push(...data)
}
</script>

<template>
  <view class="container">
    <uni-segmented-control
      :current="current"
      :values="segmentedItem"
      styleType="text"
      :activeColor="activeColor"
      @clickItem="tabsClickItem"
    />
    <scroll-view
      v-if="wordOrderData && wordOrderData.length !== 0"
      style="height: calc(100vh - 36px)"
      :scroll-y="true"
      :lower-threshold="50"
      @scrolltolower="loadMoreData"
      :refresher-enabled="true"
      :refresher-threshold="50"
      :refresher-triggered="triggered"
      @refresherrefresh="onRefresh"
      @refresherpulling="onPulling"
      @refresherrestore="onRestore"
    >
      <view class="content">
        <list>
          <listItem :status="current" v-for="item in wordOrderData" :key="item.id" :item="item" />
        </list>
      </view>
    </scroll-view>
    <empty v-else context="暂无数据" />
  </view>
</template>

<style lang="scss" scoped>
.container {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.content {
  overflow-y: auto;
}
</style>
